<!DOCTYPE html>
<html>

<head>
  <title>滑块示例</title>
  <style>
    #slider {
      width: 300px;
      height: 10px;
      background-color: #ddd;
      border-radius: 5px;
      position: relative;
      cursor: pointer;
    }

    #knob {
      width: 20px;
      height: 20px;
      background-color: #333;
      border-radius: 50%;
      position: absolute;
      top: -5px;
      left: 0;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="slider">
    <div id="knob"></div>
  </div>

  <!-- 引入 jQuery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    $(document).ready(function () {
      var sliderWidth = $("#slider").width()
      var knobWidth = $("#knob").width()
      var slideRange = sliderWidth - knobWidth

      $("#knob").on("mousedown", function (event) {
        var startX = event.pageX
        var startLeft = $(this).position().left

        $(document).on("mousemove", function (event) {
          var offsetX = event.pageX - startX
          var leftPos = startLeft + offsetX

          if (leftPos >= 0 && leftPos <= slideRange) {
            $("#knob").css("left", leftPos)
          }
          var progress = leftPos / slideRange
          console.log("当前进度：" + Math.round(progress * 100) + "%")
        })
      })

      $(document).on("mouseup", function () {
        $(document).off("mousemove")
      })
    });
  </script>

</body>

</html>